<template>
  <div class="content">
    <InformItem v-for="item in informStore.informList" :key="item.id" :informItem="item"/>
    <InformAddItem/>
  </div>
</template>

<script setup lang="ts">
import InformItem from '@renderer/components/inform/InformItem.vue'
import InformAddItem from '@renderer/components/inform/InformAddItem.vue'
import { useInformStore } from '@renderer/stores/informStore';
import { debounce } from '@renderer/utils/debounceUtils'
import { informTypes } from '@globalTypes/global'

const informStore = useInformStore()

// 订阅闹钟存储的变化
informStore.$subscribe((_mutation, state) => {
  debounceFunc(state.informList)
}, {
  detached: true
})

const debounceFunc = debounce((informList: informTypes.InformItem[]) => {
  window.api.settingSyncInformStoreEvent(JSON.stringify(informList))
}, 300)

</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow-y: overlay;
  background-color: #f9f9f9;
}
</style>
